<template>
<div>
    <div>
        <span id='span_XXX' style="display:none"></span>
    </div>
    <div>
        <span id='div_OOO' style="display:none"></span>
    </div>
    <!--针对小屏幕-->
    <div id="div_smallCheckbox" class="col-sm-12 qmain2 navbar-inverse"
         style="height: 226px; display: none;">
        <div style="width:100%;left:0; position:absolute;overflow: hidden;">
            <div class="navbar-toggleColorPhone statecolorAll" style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_All" statetype="All"
                         src=""/>&nbsp;全选(<span
                        class="AllSum">0</span>)
                </div>
            </div>
            <div id="kongxian" name="imgCheckBox" class="navbar-toggleColorPhone statecolorK"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_Free" statetype="Free"
                         src=""/>&nbsp;空闲(<span
                        class="freeSum">0</span>)
                </div>
            </div>
            <div id="chaqiang" name="imgCheckBox" class="navbar-toggleColorPhone statecolorY"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_Clink" statetype="Clink"
                         src=""/>&nbsp;已插枪(<span
                        class="clinkSum">0</span>)
                </div>
            </div>
            <div id="zanting" name="imgCheckBox" class="navbar-toggleColorPhone statecolorY"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_Pause" statetype="Pause"
                         src=""/>&nbsp;暂停(<span
                        class="PauseSum">0</span>)
                </div>
            </div>
            <div id="chongdian" name="imgCheckBox" class="navbar-toggleColorPhone statecolorY"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_Using" statetype="Using"
                         src=""/>&nbsp;充电中(<span
                        class="usingSum">0</span>)
                </div>
            </div>
            <div id="chongman" name="imgCheckBox" class="navbar-toggleColorPhone statecolorY"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_AlreadyFull" statetype="AlreadyFull"
                         src=""/>&nbsp;已充满(<span
                        class="AlreadyFullSum">0</span>)
                </div>
            </div>
            <div id="liwang" name="imgCheckBox" class="navbar-toggleColorPhone statecolorZ"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_Away" statetype="Away"
                         src=""/>&nbsp;离网(<span
                        class="awaySum">0</span>)
                </div>
            </div>
            <div id="diaodu" name="imgCheckBox" class="navbar-toggleColorPhone statecolorZ"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_LoadDispatch" statetype="LoadDispatch"
                         src=""/>&nbsp;等待调度(<span
                        class="LoadDispatchSum">0</span>)
                </div>
            </div>
            <div id="pileguzhang" name="imgCheckBox" class="navbar-toggleColorPhone statecolorL"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_PileFault" statetype="PileFault"
                         src=""/>&nbsp;终端故障(<span
                        class="pileFaultSum">0</span>)
                </div>
            </div>
            <div id="machine" name="imgCheckBox" class="navbar-toggleColorPhone statecolorL"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_ChargerFault" statetype="ChargerFault"
                         src=""/>&nbsp;充电机故障(<span
                        class="chargerFaultSum">0</span>)
                </div>
            </div>
            <div id="bms" name="imgCheckBox" class="navbar-toggleColorPhone statecolorL"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_BMSFault" statetype="BMSFault"
                         src=""/>&nbsp;BMS故障(<span
                        class="bmsFaultSum">0</span>)
                </div>
            </div>
            <div id="lianjie" name="imgCheckBox" class="navbar-toggleColorPhone statecolorL"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_ConnectFault" statetype="ConnectFault"
                         src=""/>&nbsp;连接故障(<span
                        class="connectFaultSum">0</span>)
                </div>
            </div>
            <div id="fu" name="imgCheckBox" class="navbar-toggleColorPhone statecolorY"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_FuQiang" statetype="FuQiang"
                         src=""/>&nbsp;副枪(<span
                        class="fuqiangSum">0</span>)
                </div>
            </div>
            <div id="notknow" name="imgCheckBox" class="navbar-toggleColorPhone statecolorZ"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_WeiZhi" statetype="WeiZhi"
                         src=""/>&nbsp;未知(<span
                        class="weizhiSum">0</span>)
                </div>
            </div>
            <div id="huifu" name="imgCheckBox" class="navbar-toggleColorPhone statecolorZ"
                 style="cursor:pointer">
                <div class="navbar-toggleTextPhone">
                    <img id="img_Recovering" statetype="Recovering"
                         src=""/>&nbsp;恢复中(<span
                        class="recoveringSum">0</span>)
                </div>
            </div>
        </div>
    </div>
    <!--内容部分-->
    <div class="topPileSty wholePaddingLeftRight">
        <div id="div_div_mainLeft" class="div_mainLeft col-lg-8 col-md-6 col-sm-6 col-xs-12 ">
            <div class="PileNumSty">
                <!--饼形图左侧table-->
                <table style="height:80%;width:90%">
                    <tr>
                        <td style="width:70%" class="tdPadding">终端总数(个)</td>
                        <td style="width: 30%; font-weight: bold; text-align: right;"
                            class="tdPadding"><span
                                id="PileSum" style="font-weight: bold;">0</span></td>
                    </tr>
                    <tr>
                        <td style="width: 70%" class="tdPadding">充电中终端数(个)</td>
                        <td style="width: 30%; font-weight: bold; text-align: right;"
                            class="tdPadding"><span
                                id="ChargingSum" style="font-weight: bold;">0</span></td>
                    </tr>
                    <tr>
                        <td style="width: 70%" class="tdPadding">未充电终端数(个)</td>
                        <td style="width: 30%; font-weight: bold;text-align: right;"
                            class="tdPadding"><span
                                id="NoChargingSum" style="font-weight: bold;">0</span></td>
                    </tr>
                </table>
            </div>
            <!--饼形图-->
            <div class="dataPielChart" id="dataPielChart"></div>
            <!--饼形图右侧内容-->
            <div id="divComputerCheckButton"
                 style="border: solid 1px transparent; width: auto; margin-left: 460px; ">
                <div id="divHr" style="float:left;">
                    <hr size=100 width="1" color="#e5e5e5" style="height: 125px; margin-top: 30px;">
                </div>
                <!--第一列-->
                <div class="pilldivInfoLeftForCheckBox">
                    <div class="content">
                        <!--全选-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_All" statetype="All"
                                         class="navbar-toggleColor statecolorYChecked"
                                         style="cursor:pointer"></div>
                                    <span class="navbar-toggleTextForCheckBox">全选</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="AllSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--空闲-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_Free" name="divCheckBox" statetype="Free"
                                         class="navbar-toggleColor statecolorKChecked"
                                         style="cursor:pointer"></div>
                                    <span class="navbar-toggleTextForCheckBox">空闲</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">( <span
                                                                    class="freeSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--暂停-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_Pause" name="divCheckBox" statetype="Pause"
                                         class="navbar-toggleColor statecolorYChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">暂停</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="PauseSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--离网-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_Away" name="divCheckBox" statetype="Away"
                                         class="navbar-toggleColor statecolorZChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">离网</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="awaySum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--副枪-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_FuQiang" name="divCheckBox" statetype="FuQiang"
                                         class="navbar-toggleColor statecolorYChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">副枪</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="fuqiangSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--第二列-->
                <div class="pilldivInfoLeftForCheckBox ">
                    <div class=" content">
                        <!--等待调度-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_LoadDispatch" name="divCheckBox"
                                         statetype="LoadDispatch"
                                         class="navbar-toggleColor statecolorZChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">等待调度</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="LoadDispatchSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--已插枪-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_Clink" name="divCheckBox" statetype="Clink"
                                         class="navbar-toggleColor statecolorYChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">已插枪</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="clinkSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--充电中-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_Using" name="divCheckBox" statetype="Using"
                                         class="navbar-toggleColor statecolorYChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">充电中</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="usingSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--已充满-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_AlreadyFull" name="divCheckBox"
                                         statetype="AlreadyFull"
                                         class="navbar-toggleColor statecolorYChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">已充满</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="AlreadyFullSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--未知-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_WeiZhi" name="divCheckBox" statetype="WeiZhi"
                                         class="navbar-toggleColor statecolorZChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">未知</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="weizhiSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--第三列-->
                <div class="pilldivInfoLeftForCheckBox">
                    <div class="content">
                        <!--终端故障-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_PileFault" name="divCheckBox" statetype="PileFault"
                                         class="navbar-toggleColor statecolorLChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">终端故障</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="pileFaultSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--BMS故障-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_BMSFault" name="divCheckBox" statetype="BMSFault"
                                         class="navbar-toggleColor statecolorLChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">BMS故障</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                        <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                class="bmsFaultSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--连接故障-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_ConnectFault" name="divCheckBox"
                                         statetype="ConnectFault"
                                         class="navbar-toggleColor statecolorLChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">连接故障</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="connectFaultSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--充电机故障-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_ChargerFault" name="divCheckBox"
                                         statetype="ChargerFault"
                                         class="navbar-toggleColor statecolorLChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">充电机故障</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="chargerFaultSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                        <!--恢复中-->
                        <div class="pilldivInfoForCheckBox">
                            <div class="redtextdivForCheckBox">
                                <div style="float:left;display:inline-block">
                                    <div id="div_Recovering" name="divCheckBox"
                                         statetype="Recovering"
                                         class="navbar-toggleColor statecolorZChecked"
                                         style="cursor:pointer"
                                    ></div>
                                    <span class="navbar-toggleTextForCheckBox">恢复中</span>
                                </div>
                            </div>
                            <div>
                                <div class="StateSumForCheckBox">
                                                            <span class="navbar-toggleTextForCheckBox">(&nbsp;<span
                                                                    class="recoveringSum">0</span>&nbsp;)</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div style="clear:both"></div>
        </div>
        <div id="div_div_mainRight" class="div_mainRight col-lg-4 col-md-6 col-sm-6 col-xs-12 ">
            <div style=" height: 188px; border-radius: 6px 6px 6px 6px; border: #b9bbbc 1px solid; background-color: #ffffff; ">
                <table style="height: 100%; width: 100%; padding-right: 10px; padding-left: 10px; text-align: center;">
                    <tr>
                        <td style="width:106px; padding-right: 16px; padding-top: 12px; ">
                            额定总功率(kW)
                        </td>
                        <td style="">
                            <div id="div_ChargingPowerLenth" title="100%"
                                 style="display: inline-block; width: 100%; background-color: #bbd81e;"
                                 class="navbar-toggleColorForGL "></div>
                        </td>
                        <td name="td_Power" style="padding-left: 30px; padding-right: 10px;"><label
                                id="ChargingPower" style="font-weight: bold;"/></td>
                    </tr>
                    <tr>
                        <td style="width: 106px; padding-right: 16px; padding-top: 12px; ">
                            实际总功率(kW)
                        </td>
                        <td style="">
                            <div id="div_GrossPowerLenth"
                                 style="width: 25%; background-color: #638ceb; "
                                 class="navbar-toggleColorForGL "></div>
                        </td>
                        <td name="td_Power"
                            style="padding-left: 30px; padding-right: 10px; text-align: right">
                            <label id="GrossPower" style="font-weight: bold;"></label></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>


    <div id="div_LoadDispatchGroup_computer"></div>
    <div id="div_LoadDispatchGroup_phone"></div>

    <div id="data" class="col-sm-12  no-padding-left no-padding-right"></div><!--这个可要吗？？？-->
    <table class="table table-striped table-hover table-bordered singleSelect max-width-table "
           id="editabledatatable"></table>
    <label id="xxx" style="visibility:hidden"></label>
</div>
</template>


<style>

</style>


<script>

    //import LayoutSingleList from "teld-vue-frame/vue/LayoutSingleList.vue"
    //import Buttons from "teld-vue-frame/vue/Button.vue"

    //引用组件
    export default {

        data() {
            return {} //初始化data 
        },

        mounted() {
            //初始化控件等dom操作 
            //注意只有该声明周期可以操作dom 
        },

        components: {
            //'LayoutSingleList': LayoutSingleList,
            //'Buttons': Buttons
            //注册组件
        },

        methods: {
            //页面按钮click事件绑定 
        }
    }


</script>